<script src="./js/$require.js"></script>

<script>

var vladAnimations = {
   rootPath: './images/vlad/',
   fps: 15,
   movementSpeed: 2, // in pixel
   names: {
      'stopped': 8,
      'walking': 8,
      'attack': 12,
      'tipping over': 12,
      'stopped': 1,
   },
}

$r.ready(function() {
   // init
   gamejs.display.setMode([800, 600]);
   gamejs.display.setCaption("Example Iso");

   gamejs.extra.iso.preload(vladAnimations);

   var vlad = new gamejs.extra.iso.AnimatedSprite([100, 100], vladAnimations);
      
   /**
    * M A I N
    */
   
   function handleUserInput() {
      gamejs.event.get().forEach(function(event) {
         if (event.type === gamejs.event.QUIT) {
            // do quit.
         }
         if (event.type === gamejs.event.KEYDOWN) {
            if (event.key == gamejs.event.K_KP4) {
               vlad.setDirection('w');
            } else if (event.key === gamejs.event.K_KP6) {
               vlad.setDirection('e');
            } else if (event.key === gamejs.event.K_KP8) {
               vlad.setDirection('n');
            } else if (event.key === gamejs.event.K_KP2) {
               vlad.setDirection('s');
            } else if (event.key === gamejs.event.K_KP7) {
               vlad.setDirection('nw');
            } else if (event.key === gamejs.event.K_KP9) {
               vlad.setDirection('ne');
            } else if (event.key === gamejs.event.K_KP1) {
               vlad.setDirection('sw');
            } else if (event.key === gamejs.event.K_KP3) {
               vlad.setDirection('se');
            } else if (event.key === gamejs.event.K_KP5) {
               vlad.setAnimation('attack');            
            } else if (event.key === gamejs.event.K_ENTER) {
               vlad.setAnimation('walking');
            } else if (event.key === gamejs.event.K_SPACE) {
               vlad.setAnimation('tipping over');
            }
         }
         return;
      }); // end while
      return;
   }
   
   // game loop
   var mainSurface = gamejs.display.getSurface();
   var tick = function(msDuration) {
         mainSurface.fill("#FFFFFF");
         vlad.draw(mainSurface);
         handleUserInput();
         vlad.update(msDuration);
   };
   gamejs.time.fpsCallback(tick, this, 30);

});
 
</script>
</head>

<body>
<h2>Example ISO Animations</h2>
To start animations, press those keys on Keypad:
<ul>
   <li> ENTER: start moving
   <li> SPACE: run tip over animation
   <li> any keypad direction (1,4,7,8,9,6,3) - rotate in that direction
   <li> center of keypad (5):run attack animation
</ul>

</body>

